<template>
  <div>
    <!-- 替车车辆信息 -->
    <div class="card-wrap flex-column justify-end card-padding">
      <el-form :model="form" ref="vehicleInformation" label-width="100px" :rules="type == 'detail' ? {} : rules" :label-position="type == 'detail' ? 'right' : 'top'">
        <div class="card-title-wrap">
          <span>替车车辆信息</span>
          <span></span>
        </div>
        <!-- 替车车辆信息 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="品牌:" prop="brandName">
              <el-input v-if="type !== 'detail'" style="width: 80%" v-model="form.brandName"></el-input>
              <span v-if="type == 'detail'">{{ form.brandName | filterNull }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车系:" prop="seriesName">
              <el-input v-if="type !== 'detail'" style="width: 80%" v-model="form.seriesName"></el-input>
              <span v-if="type == 'detail'">{{ form.seriesName | filterNull }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车型:" prop="modelName">
              <el-input v-if="type !== 'detail'" style="width: 80%" v-model="form.modelName"></el-input>
              <span v-if="type == 'detail'">{{ form.modelName | filterNull }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="指导价:" prop="guidancePrice">
              <el-input v-if="type !== 'detail'" style="width: 80%" v-model="form.guidancePrice"></el-input>
              <span v-if="type == 'detail'">{{ format_thousand(form.guidancePrice) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="外观颜色:" prop="exteriorColor">
              <el-input v-if="type !== 'detail'" style="width: 80%" v-model="form.exteriorColor"></el-input>
              <span v-if="type == 'detail'">{{ form.exteriorColor | filterNull }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="内饰颜色:" prop="interiorColor">
              <el-input v-if="type !== 'detail'" style="width: 80%" v-model="form.interiorColor"></el-input>
              <span v-if="type == 'detail'">{{ form.interiorColor | filterNull }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="月折旧费:" prop="carMonthlyPremium">
              <el-input v-if="type !== 'detail'" style="width: 80%" v-model="form.carMonthlyPremium"></el-input>
              <span v-if="type == 'detail'">{{ format_thousand(form.carMonthlyPremium) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登记证日期:" prop="issuanceDate">
              <el-input v-if="type !== 'detail'" style="width: 80%" v-model="form.issuanceDate"></el-input>
              <span v-if="type == 'detail'">{{ form.issuanceDate | filterNull }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-descriptions title="保险套餐" />

        <table-page :dataList="form.insurancePackages" border :total="total" style="width: 95%; margin: 0 auto">
          <!-- 普通列插槽 -->
          <template slot="tableCol">
            <el-table-column label="商业险种" align="center" prop="insuranceProName" />
            <el-table-column label="保额/万元" align="center" prop="insuranceQuota">
              <template slot-scope="scope">
                <span v-if="typeof scope.row.insuranceQuota === 'number'">
                  {{ format_thousand(scope.row.insuranceQuota) }}
                </span>
                <span v-else>{{ scope.row.insuranceQuota }}</span>
              </template>
            </el-table-column>
            <el-table-column label="保险费用/元" align="center" prop="insurancePrice">
              <template slot-scope="scope">
                <span>
                  {{ format_thousand(scope.row.insurancePrice) }}
                </span>
              </template>
            </el-table-column>
          </template>
        </table-page>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'vehicleInformation',
  dicts: ['car_nature'],
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: '',
    },
  },
  computed: {
    form: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
    type() {
      let status
      switch (this.state) {
        case 'write':
          status = 'edit'
          break
        case 'disabled':
          status = 'detail'
          break
        case 'readonly':
          status = 'detail'
          break
        case 'detail':
          status = 'detail'
          break
        case 'edit':
          status = 'edit'
        case 'add':
          status = 'add'
          break
      }
      return status
    },
  },
  data() {
    return {
      total: 0,
      rules: {
        brandName: [
          {
            required: true,
            message: '请输入品牌',
            trigger: 'blur',
          },
        ],
        modelName: [
          {
            required: true,
            message: '请输入车型',
            trigger: 'blur',
          },
        ],
        seriesName: [
          {
            required: true,
            message: '请输入车系',
            trigger: 'blur',
          },
        ],
        exteriorColor: [
          {
            required: true,
            message: '请输入外观颜色',
            trigger: 'blur',
          },
        ],
        interiorColor: [
          {
            required: true,
            message: '请输入内饰颜色',
            trigger: 'blur',
          },
        ],
        guidancePrice: [
          {
            required: true,
            message: '请输入指导价',
            trigger: 'blur',
          },
        ],
        carMonthlyPremium: [
          {
            required: true,
            message: '请输入月折旧费',
            trigger: 'blur',
          },
        ],
        issuanceDate: [
          {
            required: true,
            message: '请选择登记证日期',
            trigger: 'change',
          },
        ],
        iiii: [
          {
            required: true,
            message: '请输入车损险',
            trigger: 'blur',
          },
        ],
        jjjj: [
          {
            required: true,
            message: '请输入三者险',
            trigger: 'blur',
          },
        ],
        kkkk: [
          {
            required: true,
            message: '请输入司乘险-司机',
            trigger: 'blur',
          },
        ],
        llll: [
          {
            required: true,
            message: '请输入司乘险-乘客',
            trigger: 'blur',
          },
        ],
        mmmm: [
          {
            required: true,
            message: '请输入盗强险',
            trigger: 'blur',
          },
        ],
        nnnn: [
          {
            required: true,
            message: '请输入玻璃险',
            trigger: 'blur',
          },
        ],
        vvvv: [
          {
            required: true,
            message: '请输入划痕险',
            trigger: 'blur',
          },
        ],
        xxxx: [
          {
            required: true,
            message: '请输入不计免赔金',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {},
  methods: {
    // 创建时间发生改变
    changeTime(val) {
      this.form.startTime = val && val[0]
      this.form.endTime = val && val[1]
    },
    valid() {
      return new Promise(async (resolve) => {
        let result = true
        let refs = Object.values(this.$refs)
        for (let index = 0; index < refs?.length; index++) {
          const ref = refs[index]
          if (Object.prototype.toString.call(ref) == '[object Array]') {
            for (let i = 0; i < ref.length; i++) {
              const element = ref[i]
              if (element?.valid) {
                let rc = await element?.valid?.()
                result = result && rc
              }
              if (element?.validate) {
                let rf = await this._valid(ref)
                result = result && rf
              }
              if (element?.form_validate) {
                let rf = await this._valid(ref, 'form_validate')
                result = result && rf
              }
            }
          } else {
            if (ref?.valid) {
              let rc = await ref?.valid?.()
              result = result && rc
            }
            if (ref?.validate) {
              let rf = await this._valid(ref)
              result = result && rf
            }
            if (ref?.form_validate) {
              let rf = await this._valid(ref, 'form_validate')
              result = result && rf
            }
          }
        }
        resolve(result)
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.box-wraps:after {
  content: '';
  display: block;
  clear: both;
  width: 32%;
}
</style>
